<template>
  <a-config-provider :locale="zhCN">
    <div id="app">
      <a-layout style="min-height: 100vh">
        <!-- 顶部导航 -->
        <a-layout-header class="header">
          <div class="logo">
            <h2 style="color: white; margin: 0;">零售ERP管理系统</h2>
          </div>
          <div class="user-info">
            <a-dropdown>
              <a-button type="text" style="color: white;">
                <UserOutlined />
                管理员
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">个人设置</a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="logout">退出登录</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>

        <a-layout>
          <!-- 侧边导航 -->
          <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <a-menu
              v-model:selectedKeys="selectedKeys"
              mode="inline"
              theme="dark"
              :inline-collapsed="collapsed"
              @click="handleMenuClick"
            >
              <a-menu-item key="/dashboard">
                <DashboardOutlined />
                <span>工作台</span>
              </a-menu-item>
              
              <a-sub-menu key="basic">
                <template #icon><DatabaseOutlined /></template>
                <template #title>基础管理</template>
                <a-menu-item key="/master-data">档案管理</a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="business">
                <template #icon><ShoppingCartOutlined /></template>
                <template #title>业务管理</template>
                <a-menu-item key="/procurement">采购管理</a-menu-item>
                <a-menu-item key="/operation">营运管理</a-menu-item>
                <a-menu-item key="/fresh">生鲜管理</a-menu-item>
                <a-menu-item key="/warehouse">仓储管理</a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="extend">
                <template #icon><TeamOutlined /></template>
                <template #title>扩展业务</template>
                <a-menu-item key="/franchise">加盟管理</a-menu-item>
                <a-menu-item key="/wholesale">批发管理</a-menu-item>
                <a-menu-item key="/member">会员管理</a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="support">
                <template #icon><SettingOutlined /></template>
                <template #title>支撑系统</template>
                <a-menu-item key="/finance">财务管理</a-menu-item>
                <a-menu-item key="/analytics">决策管理</a-menu-item>
                <a-menu-item key="/system">系统设置</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>

          <!-- 主内容区域 -->
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
              <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item">
                {{ item }}
              </a-breadcrumb-item>
            </a-breadcrumb>
            
            <a-layout-content
              :style="{
                background: '#fff',
                padding: '24px',
                margin: 0,
                minHeight: '280px',
              }"
            >
              <!-- 路由视图 -->
              <router-view />
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </div>
  </a-config-provider>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import {
  UserOutlined,
  DownOutlined,
  DashboardOutlined,
  DatabaseOutlined,
  ShoppingCartOutlined,
  TeamOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()

const collapsed = ref(false)
const selectedKeys = ref<string[]>(['/dashboard'])



// 面包屑导航
const breadcrumbItems = computed(() => {
  const path = route.path
  const items = ['首页']
  
  if (path.startsWith('/master-data')) items.push('基础管理', '档案管理')
  else if (path.startsWith('/procurement')) items.push('业务管理', '采购管理')
  else if (path.startsWith('/operation')) items.push('业务管理', '营运管理')
  else if (path.startsWith('/fresh')) items.push('业务管理', '生鲜管理')
  else if (path.startsWith('/warehouse')) items.push('业务管理', '仓储管理')
  else if (path.startsWith('/franchise')) items.push('扩展业务', '加盟管理')
  else if (path.startsWith('/wholesale')) items.push('扩展业务', '批发管理')
  else if (path.startsWith('/member')) items.push('扩展业务', '会员管理')
  else if (path.startsWith('/finance')) items.push('支撑系统', '财务管理')
  else if (path.startsWith('/analytics')) items.push('支撑系统', '决策管理')
  else if (path.startsWith('/system')) items.push('支撑系统', '系统设置')
  else if (path === '/dashboard') items.push('工作台')
  
  return items
})

// 监听路由变化更新选中菜单
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath]
  },
  { immediate: true }
)

// 菜单点击处理
const handleMenuClick = ({ key }: { key: string }) => {
  selectedKeys.value = [key]
  router.push(key)
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #001529;
}

.logo h2 {
  color: white;
  margin: 0;
}

.user-info {
  color: white;
}


</style>